<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJock">
        <p >{{jock}}</p>
        <input type="text" value="请输入用户名" v-model="user.username">
        <input type="password" value="密码" v-model="user.password">
        <input type="button" value="登录" @click="login">
        <div v-if="user.name!=''">
            <ul>
                <li>
                    姓名:{{user.name}}
                </li>
                <li>
                    班级:{{user.class}}
                </li>
                <li>
                    德育分:{{user.score}}
                </li>
            </ul>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        // document.querySelector(".get").onclick = function () {
        //     axios.get("https://autumnfish.cn/api/joke/list?num=1")
        //         // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
        //         .then(function (response) {
        //             console.log(response);
        //         }, function (err) {
        //             console.log(err);
        //         })
        // }
        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
        // document.querySelector(".post").onclick = function () {
        //     axios.post("https://autumnfish.cn/api/user/reg", { username: "盐焗西兰花" })
        //         .then(function (response) {
        //             console.log(response);
        //             console.log(this.skill);
        //         }, function (err) {
        //             console.log(err);
        //         })
        // }
        var app = new Vue({
            el: "#app",
            data: {
                jock: "这里会有一个笑话",
                user:{
                    username:"201912084018",
                    name:"",
                    class:"",
                    score:0,
                    password:"123456"
                }
                
                
            },
            methods: {
                getJock: function () {
                    var that = this
                    axios.get("https://autumnfish.cn/api/joke/list?num=1").then
                        (
                            function (response) {
                                that.jock=response.data.jokes[0]
                            },
                            function (err) {
                                console.log(err)
                            }
                        )
                },
                login: function(){
                    var that = this
                    axios.post("http://47.100.180.239/api/v1/student/login",{ username: that.user.username,password:that.user.password }).then
                        (
                            function (response) {
                                console.log(response)
                                that.user.name=response.data.data.student_name
                                that.user.class=response.data.data.class_name
                                that.user.score=response.data.data.score
                            },
                            function (err) {
                                console.log(err)
                            }
                        )
                }
            }
        })
    </script>
</body>

</html>